*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    padding: 50%;
    background-color: #30dcc0;

}

body>div{
    height: 300px;
    width: 1080px;
    margin: 0 auto;
}

.d1{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    animation: sf;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    display: inline-block;
    /*transition: all ;*/

}

@keyframes sf {
    0% {
        transform: translatey(0px)
    }
    20%{transform: translatey(-30px)}

    40%{  transform: translatey(0px)  }
    60%{  transform: translatey(-60px)  }
    80%{  transform: translatey(0px)  }

}

.d2{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    animation: sf;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    animation-delay:0.25s;
    display: inline-block;
    margin-left: 30px;

}

.d3{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    animation: sf;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    animation-delay:0.5s;
    display: inline-block;
    margin-left: 30px;
}

@keyframes d24 {
    0% {transform: scaley(1)}
    50% {transform: scaley(0)}
    100% {transform: scaley(1)}

}

ul{
    height: 300px;
    width: 1080px;
}

li {
    width: 10px;
    height: 50px;
    background-color: white;
    animation: d24;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /*animation-direction:alternate;*/
    display: inline-block;
    margin-left: 3px;
    list-style: none;
}

li:nth-child(2){ animation-delay:0.1s; }
li:nth-child(3){ animation-delay:0.2s; }
li:nth-child(4){ animation-delay:0.3s; }
li:nth-child(5){ animation-delay:0.4s; }
li:nth-child(6){ animation-delay:0.5s; }
li:nth-child(7){ animation-delay:0.6s; }
li:nth-child(8){ animation-delay:0.7s; }
li:nth-child(9){ animation-delay:0.8s; }
li:nth-child(10){ animation-delay:0.9s; }












